<template>
    <div>
        <searchHeader></searchHeader>
        <van-tabs v-model:active="topList" swipeable title-inactive-color="#ccc" color="#f06742" duration='0'
            @click-tab="onClickTab" style="margin-top: 50px">
            <van-tab :title="item.name" v-for="item, index in list">
                <van-sidebar v-model="active" style="overflow: scroll ; height: 100%;">
                    <van-sidebar-item :title="one.name" v-for="one, index in item.tabWraps"
                        @click="getcenterlist(one.rankingId)" />

                </van-sidebar>


            </van-tab>



        </van-tabs>
        <div class="center" style="overflow: scroll ; height: 100%;">
            <div class=" mian" v-for="item, index in centerlist" :key="item.id">
                <van-image class="mianimage" :src="show(index)" v-show="index < 3"></van-image>
                <div class="mianimage" v-show="index > 2">{{ index + 1 }}</div>
                <!-- <span v-show="index == 0" :class="{ active1: index == 0 }" class="mianimage">1</span> -->
                <img :src="`https://imagev2.xmcdn.com/${item.cover}!op_type=3&columns=144&rows=144&magick=webp`" alt=""
                    class="mianimg">
                <div class="mianlist">
                    <text class="listtext">{{ item.albumTitle }}</text>
                    <text class="listname">{{ item.salePoint }}</text>
                    <div class="bottom">
                        <van-icon name="play-circle-o" class="bottomicon" size="12" color="#ccc" />
                        <text class="bottomname">{{ item.playCount }}亿</text>
                        <van-icon name="bar-chart-o" class="bottomicon" size="12" color="#ccc" />
                        <text class="buttomtext">{{ item.trackCount }}</text>
                        <van-divider />
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script lang="ts">

import { getlist, getlistApi } from '@/api/ranking/ranking';
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
    name: "Ranking",
})
</script>
<script lang="ts" setup>
const topList = ref(0)
const active = ref(0)
const list = ref<any>([])
const center = ref<any>({})
let listitem = ref<any>()


const getlistitem = async () => {
    const res: any = await getlist(1)
    list.value = res.tabLists
    // console.log(111, list.value)
    // items.value = list.value.map((t1: any) => {
    //     return t1.tabWraps.map((t2: any) => {
    //         return { text: t2.name, ...t2 }
    //     })
    // })
    // console.log(222, items.value);
}

//中间内容
const centerlist = ref<any>([])
const getcenterlist = async (rankingId: any) => {
    const res = await getlistApi(rankingId)
    // console.log(rankingId, 2222);

    center.value = res
    // console.log(center.value, 1111);


    // console.log(center.value.rankList[0].albums);
    centerlist.value = center.value.rankList[0].albums.slice(0, 30)
}

const show = (index: any) => {
    if (index == 0) {
        return 'https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_first_4dd5bad.png'
    } else if (index == 1) {
        return 'https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_second_977bd19.png'
    } else {
        return 'https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_third_1a96b0c.png'
    }

}



onMounted(() => {
    getlistitem()
    getcenterlist(100006)
    // console.log(getcenterlist(100006), 99999);


})
let listindex = ref<any>()
const onClickTab = (name: any) => {
    // console.log('name', name.name);
    // console.log('list', list.value)
    listitem.value = list.value[+name.name]
    // console.log(list.value[+name.name]);
    // console.log(listitem.value);

    listindex.value = listitem.value.tabWraps
    // console.log(listindex.value, 4444);

    getcenterlist(listindex.value[0].rankingId)

    // console.log(res);

    // console.log(listindex.value[0].ranking, 444);

    // console.log(listindex.value, 5555);



    // console.log(listitem.value, 2222);


}





</script>

<style lang="less" scoped>
.center {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 104px;
    right: 30px;
    height: auto;


    .mian {
        display: flex;
        flex-direction: row;
        margin-top: 5px;

    }
}



.mian .mianimage {
    height: 25px;
    margin-left: 5px;
    width: 25px;
    line-height: 19px;
    text-align: center;
    background: 50%/18px no-repeat;
    font-size: 20px;
}

.mian .mianimg {
    height: 70px;
    margin-left: 10px;

}

.mianlist {
    display: flex;
    flex-direction: column;
    line-height: 19px;
    margin-left: 10px;
}

.mianlist .listtext {
    color: black;
    line-height: 19px;
    margin-bottom: 20px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;
    height: 19px;
    width: 160px;

}

.mianlist .listname {
    color: #ccc;
    font-size: 12px;
    // margin-bottom: 5px;
}

.bottom {
    margin-top: 5px;
}

.bottom .bottomname {
    font-size: 12px;
    color: #ccc;
    padding-left: 5px;
    padding-right: 5px;
}

.bottom .buttomtext {
    font-size: 12px;
    color: #ccc;
    padding-left: 5px;
}

.active1 {
    background-image: url(https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_first_4dd5bad.png)
}

.active2 {
    background-image: url(https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_second_977bd19.png)
}

.active3 {
    background-image: url(https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_third_1a96b0c.png)
}
</style>